<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <button id="qq">全选</button>
    <button id="ff">全不选</button>
    <button id="xx">反选</button>

    <br />
    篮球:<input id="hobby" type="checkbox" checked><br />
    足球:<input id="hobby" type="checkbox" checked><br />
    排球:<input id="hobby" type="checkbox" checked><br />
    羽球:<input id="hobby" type="checkbox" checked><br />
    橄球:<input id="hobby" type="checkbox" checked><br />
    球球:<input id="hobby" type="checkbox" checked><br />
</body>

</html>
<script>
    // var Input = document.getElementsByTagName("input")
    // console.log(Input)
    var Input = document.getElementsByTagName("input")

    // for (var i = 0; i < Input.length; i++) {
    //     Input[i].onclick = function () {
    //             //  先移出 后添加
    //             // 只给当前点击的这个元素添加active，其他的元素都要移出 active
    //             // 通过循环把每一一个按钮的active都移出
    //             for (var j = 0; j < Input.length; j++) {
    //                 Input[j].checked = "true"
    //             }
    //             // 给当前点击的这个元素 添加active
    //             this.checked = ""

    //         }
    // }

    qq.onclick = function () {
        console.log(Input)

        for (var i = 0; i < Input.length; i++) {
            Input[i].checked = "true"
        }


    }
    ff.onclick = function () {
        console.log(Input)

        for (var i = 0; i < Input.length; i++) {
            Input[i].checked = ""
        }

    }
    xx.onclick = function () {
        console.log(Input)

        for (var i = 0; i < Input.length; i++) {
            if (Input[i].checked == false)
                Input[i].checked = true;
            else
                Input[i].checked = false;
        }

    }


</script>